import React, { useState, } from 'react';
import { useNavigate } from 'react-router-dom'
import { Breadcrumb, Input, Button, Form, Checkbox, Divider } from 'antd';
import '../../../views/Index/RoleAdd/RoleAdd.scss'

interface Props {

}

function RoleAdd(props: Props) {

    const [form] = Form.useForm();
    const navigate = useNavigate()
    const tiao = () => {
        navigate('/index/role')
    }

    const { TextArea } = Input;


    const CheckboxGroup = Checkbox.Group;
    const plainOptions = ['数据概况', '访问量统计', '快捷入口', '课程排行'];
    const defaultCheckedList = ['Apple', 'Orange'];

    const [checkedList, setCheckedList] = useState<any[]>(defaultCheckedList);
    const [indeterminate, setIndeterminate] = useState(true);
    const [checkAll, setCheckAll] = useState(false);

    const onChange = (list: any[]) => {
        setCheckedList(list);
        setIndeterminate(!!list.length && list.length < plainOptions.length);
        setCheckAll(list.length === plainOptions.length);
    };

    const onCheckAllChange = (e: any) => {
        setCheckedList(e.target.checked ? plainOptions : []);
        setIndeterminate(false);
        setCheckAll(e.target.checked);
    };

    return (
        <div className='roleadd'>
            <div className="one">
                <Breadcrumb>
                    <Breadcrumb.Item>
                        <a href="">设置</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">角色管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">新建角色信息</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <p>新建角色信息</p>
            </div>
            <div className="zhong">
                <p>基础信息</p>
                <Form className='ming' form={form}>
                    <Form.Item
                        name="角色名称"
                        label="角色名称"
                        rules={[{ required: true, message: '请输入' }]}
                    >
                        <Input placeholder="请输入" />
                    </Form.Item>
                </Form>
                <div className="jieshao">
                    <p>角色描述:</p>
                    <TextArea rows={4} placeholder="请输入" maxLength={1000} />
                </div>
            </div>
            <div className="xia">
                <p>权限信息</p>
                <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
                    首页
                </Checkbox>
                <Divider />
                <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
                <div className="btn">
                    <Button type="primary">提交</Button>
                    <Button onClick={tiao}>返回</Button>
                </div>
            </div>
        </div>
    );
}

export default RoleAdd;